'use client'

import React from 'react'
import { Card, Empty, Typography, Button } from 'antd'
import { EyeOutlined, SettingOutlined } from '@ant-design/icons'
import { useUIStore } from '@/stores/uiStore'
import { useImageStore } from '@/stores/imageStore'
import { Viewer3DLazy, Viewer2DLazy } from '@/components/LazyComponents'
import { usePerformanceMonitor } from '@/utils/performance'
import { LoadingSpinner, ImageLoadingPlaceholder } from '@/components/LoadingSpinner'

const { Title, Text } = Typography

export const ViewerArea: React.FC = () => {
    const { viewerType, selectedDataset, selectedImage } = useUIStore()
    const { currentImageData, loadingStates } = useImageStore()
    const { startTiming } = usePerformanceMonitor()

    // 性能监控
    React.useEffect(() => {
        const endTiming = startTiming(`viewer-${viewerType}-render`)
        return () => {
            endTiming()
        }
    }, [viewerType, startTiming])

    // 如果没有选择数据集，显示欢迎界面
    if (!selectedDataset) {
        return (
            <div className="viewer-area h-full flex items-center justify-center bg-gray-50">
                <div className="text-center max-w-md">
                    <Empty
                        image={Empty.PRESENTED_IMAGE_SIMPLE}
                        description={
                            <div>
                                <Title level={4} className="text-gray-600 mb-2">
                                    欢迎使用医学影像处理平台
                                </Title>
                                <Text type="secondary" className="text-base">
                                    请从左侧工具箱选择一个数据集开始分析
                                </Text>
                            </div>
                        }
                    />
                </div>
            </div>
        )
    }

    // 如果没有选择影像数据，显示提示
    if (!selectedImage || !currentImageData) {
        return (
            <div className="viewer-area h-full flex items-center justify-center bg-gray-50">
                <div className="text-center max-w-md">
                    <Empty
                        image={Empty.PRESENTED_IMAGE_SIMPLE}
                        description={
                            <div>
                                <Title level={4} className="text-gray-600 mb-2">
                                    <EyeOutlined className="mr-2" />
                                    等待影像数据
                                </Title>
                                <Text type="secondary" className="text-base">
                                    请选择一个任务来加载影像数据
                                </Text>
                            </div>
                        }
                    />
                </div>
            </div>
        )
    }

    // 根据数据类型渲染对应的查看器
    const renderViewer = () => {
        if (loadingStates.imageData === 'loading') {
            return (
                <div className="h-full flex items-center justify-center p-4">
                    <ImageLoadingPlaceholder
                        width="100%"
                        height="100%"
                        title="正在加载影像数据..."
                    />
                </div>
            )
        }

        if (loadingStates.imageData === 'error') {
            return (
                <div className="h-full flex items-center justify-center">
                    <Empty
                        description={
                            <div>
                                <Title level={4} className="text-red-600 mb-2">
                                    影像数据加载失败
                                </Title>
                                <Text type="secondary">
                                    请检查网络连接或联系技术支持
                                </Text>
                            </div>
                        }
                    />
                </div>
            )
        }

        switch (viewerType) {
            case '3D':
                return <Viewer3DLazy />
            case '2D':
                return <Viewer2DLazy />
            default:
                return (
                    <div className="h-full flex items-center justify-center">
                        <Empty
                            description={
                                <div>
                                    <Title level={4} className="text-gray-600 mb-2">
                                        未知的查看器类型
                                    </Title>
                                    <Text type="secondary">
                                        请重新选择数据集
                                    </Text>
                                </div>
                            }
                        />
                    </div>
                )
        }
    }

    return (
        <div className="viewer-area h-full flex flex-col bg-white fade-in">
            {/* 查看器头部 */}
            <div className="viewer-header flex items-center justify-between p-4 border-b bg-gray-50">
                <div className="flex items-center space-x-3">
                    <EyeOutlined className="text-lg text-blue-600" />
                    <div>
                        <Title level={5} className="mb-0">
                            {viewerType === '3D' ? '3D 影像查看器' : '2D 影像查看器'}
                        </Title>
                        <Text type="secondary" className="text-sm">
                            数据集: {selectedDataset} | 影像: {selectedImage}
                        </Text>
                    </div>
                </div>

                <div className="flex items-center space-x-2">
                    <Button
                        type="text"
                        icon={<SettingOutlined />}
                        size="small"
                    >
                        设置
                    </Button>
                </div>
            </div>

            {/* 查看器内容 */}
            <div className="viewer-content flex-1 overflow-hidden">
                {renderViewer()}
            </div>

            {/* 查看器状态栏 */}
            <div className="viewer-status border-t bg-gray-50 px-4 py-2">
                <div className="flex items-center justify-between text-sm text-gray-600">
                    <div className="flex items-center space-x-4">
                        <span>类型: {currentImageData?.type || 'Unknown'}</span>
                        <span>格式: {currentImageData?.format || 'Unknown'}</span>
                        {currentImageData?.dimensions && (
                            <span>
                                尺寸: {currentImageData.dimensions.width} × {currentImageData.dimensions.height}
                                {currentImageData.dimensions.depth && ` × ${currentImageData.dimensions.depth}`}
                            </span>
                        )}
                    </div>
                    <div className="flex items-center space-x-2">
                        <span>状态: {loadingStates.imageData}</span>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default ViewerArea